<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: acer
  Date: 2018/12/17
  Time: 18:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>分类信息分页显示</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="/static/js/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
    <script src="/static/layuiadmin/layui/layui.js" charset="utf-8" type="text/javascript"></script>
</head>
<body>
<div style="margin-bottom: 5px;">
    <ins class="adsbygoogle" style="display:inline-block;width:970px;height:50px"
         data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>
</div>

<div class="demoTable">

    <form id="myform" action="" method="post" class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">分类名称:</label>
                <div class="layui-inline">
                    <input class="layui-input" name="caname" id="caname" placeholder="" autocomplete="off">
                </div>
            </div>
        </div>
    </form>

    <div class="layui-form-item" style="margin-left: 300px;margin-top: -63px">
        <button class="layui-btn" data-type="isreload" onclick="sear()">搜索</button>
        <button class="layui-btn" data-type="isAdd">添加分类</button>
    </div>
</div>

<table class="layui-hide" id="idTest" lay-filter="demo"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">查看文章</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除分类</a>
</script>

<script>
    layui.use('table', function () {
        var $ = layui.$;
        var params = JSON.stringify($('#myform').serializeObject());
        var table = layui.table;
        //执行一个 table 实例
        table.render({
            elem: '#idTest',
            url: 'categoryPage?caname=' + encodeURIComponent(params),   //数据接口,
            title: '',
            page: true,
            limit: 10,
            limits: [10, 20, 30, 40, 50],
            cols: [[ //表头
                {type: 'numbers', title: '序号', align: 'center', width: 100}
                , {field: 'caid', title: '分类管理ID', sort: true, align: 'center', hide: true}
                , {field: 'catime', title: '创建时间', sort: true, align: 'center'}
                , {field: 'caname', title: '分类名称', sort: true, align: 'center'}
                , {field: 'canum', title: '内容数量', sort: true, align: 'center'}
                , {fixed: 'right', title: '操作', align: 'center', toolbar: '#barDemo'}
            ]]
            , id: "test"
        });
    });

    //查询方法
    function sear() {
        var params = {
            caname: $('#caname').val(),
        };
        layui.use(['laypage', 'layer', 'table'], function () {
            var laydate = layui.laydate //日期
                , laypage = layui.laypage //分页
                , table = layui.table; //表格
            table.reload('test', {
                url: 'categoryPage?caname=' + encodeURIComponent(JSON.stringify(params)) //数据接口
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });
    }


    layui.use('table', function () {
        var table = layui.table;

        //监听单元格编辑
        table.on('edit(test)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            layer.msg('[ID: ' + data.noticeId + '] ' + field + ' 字段更改为：' + value);
        });
        //监听工具条
        table.on('tool(demo)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url: "deleteCategoryById",    //请求的url地址
                        dataType: "json",   //返回格式为json
                        contentType: "application/json",
                        async: true,//请求是否异步，默认为异步，这也是ajax重要特性
                        data: {"caid": data.caid},  //参数值
                        type: "GET",   //请求方式
                        success: function (data) {
                            //请求成功时处理
                            layer.alert(data.msg, function (index) {
                                location.reload();
                            })
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                parent.layer.open({
                    title: '查看内容',
                    maxmin: true,
                    type: 2,
                    content: '../category/selcontent?caid=' + data.caid,
                    area: ['800px', '600px'],
                    end: function () {
                        location.reload();
                    }
                })
            }
        });

        var $ = layui.$, active = {
            getCheckData: function () { //获取选中数据
                var checkStatus = table.checkStatus('idTest')
                    , data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
            , getCheckLength: function () { //获取选中数目
                var checkStatus = table.checkStatus('idTest')
                    , data = checkStatus.data;
                layer.msg('选中了：' + data.length + ' 个');
            }
            , isAll: function () { //验证是否全选
                var checkStatus = table.checkStatus('idTest');
                layer.msg(checkStatus.isAll ? '全选' : '未全选')
            }
            , isAdd: function () {
                layer.open({
                    type: 2
                    , title: '新增分类'
                    , maxmin: true
                    , area: ['820px', '350px']
                    , content: '../category/add'
                    , end: function () {
                        location.reload();
                    }
                });
            }
            , reload: function () {
                //执行重载
                table.reload('test', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>


<script>
    jQuery.prototype.serializeObject = function () {
        var obj = new Object();
        $.each(this.serializeArray(), function (index, param) {
            if (!(param.name in obj)) {
                obj[param.name] = param.value;
            }
        });
        return obj;
    };
</script>

</body>
</html>
